<template>
  <div class="user-wrap">
    <mt-header title="我的">
      <c-router-back slot="left"></c-router-back>
    </mt-header>
    <!-- 个人信息 -->
    <div class="user-info pl15">
      <div class="user-avatar mr15">
        <img class="user-avatar-img" v-if="avatar" :src="avatar" alt="">
        <img class="user-avatar-img" v-else="!avatar" src="../assets/imgs/avatar.png" alt="">
        <sub class="user-vip" v-if="isVip"></sub>
      </div>
      <div class="user-msg">
        <div class="user-name mb10">超级管理员 <span class="viprank">Lv2</span></div>
        <div class="user-des"><span class="mr5">郑州外国语学校</span><span class="mr5">高三</span></div>
      </div>
      <div class="user-edit">
        <router-link :to="{name:'useredit'}"><i class="iconfont xzy-icon-enter"></i></router-link>
      </div>
    </div>
    <!-- 第一部分 -->
    <div class="user-option">
      <router-link :to="item.href" v-for="(item,index) in options" :key="index">
        <img class="user-option-img mb5" :src="item.icon" alt="">
        <label>{{item.label}}
          <small v-if="item.isVip" class="text-second">VIP</small>
        </label>
      </router-link>
    </div>
    <!-- 第二部分 -->
    <div class="mt10 user-items" v-for="(item,index) in items" :key="index">
      <router-link class="user-item pl15" :key="index" :to="item.href" v-for="(item,index) in item">
        <img class="mr10" :src="item.icon" width="22" height="22">
        <span>{{item.label}}</span>
        <i class="iconfont xzy-icon-enter"></i>
      </router-link>
    </div>
    <!-- 第三部分 -->
    <div class="mt10 user-items">
      <router-link class="user-item pl15" :to="{name: 'aboutus'}">
        <img class="mr10" src="../assets/imgs/icon/icon-aboutus.png" width="22" height="22">
        <span>关于我们</span>
        <i class="iconfont xzy-icon-enter"></i>
      </router-link>
      <router-link class="user-item pl15" :to="{name: 'setup'}">
        <img class="mr10" src="../assets/imgs/icon/icon-setup.png" width="22" height="22">
        <span>设置</span>
        <i class="iconfont xzy-icon-enter"></i>
      </router-link>
    </div>
    <c-tab-bar></c-tab-bar>
  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'

  export default {
    name: 'User',
    data () {
      return {
        options: [{
          label: '我的收藏',
          icon: require('../assets/imgs/user_collection.png'),
          href: {name: 'user_collection'}
        }, {
          label: '我的错题本',
          icon: require('../assets/imgs/user_errortext.png'),
          href: {name: 'user_errortext'}
        }, {
          label: '我的报告',
          icon: require('../assets/imgs/user_report.png'),
          href: {name: 'user_report'}
        }],
        items: [
          [{
            label: '建议反馈',
            icon: require('../assets/imgs/icon/icon-suggestion.png'),
            href: {name: 'suggestion'}
          }, {
            label: '常见问题',
            icon: require('../assets/imgs/icon/icon-problem.png'),
            href: {name: 'problem'}
          }, {
            label: '客户服务',
            icon: require('../assets/imgs/icon/icon-customer.png'),
            href: {name: 'customer'}
          }, {
            label: '给我们好评',
            icon: require('../assets/imgs/icon/icon-praise.png'),
            href: {name: 'praise'}
          }]
        ]
      }
    },
    computed: {
      ...mapState('user', [
        'isVip',
        'avatar',
        'province_name',
        'subject_name',
        'batch_num',
        'score',
        'account',
        'user_name'
      ]),
      ...mapGetters('user', [
        'batchFormat'
      ])
    },
    methods: {
      upgradeVIP () {
        if (!this.isVip) {
          this.$router.push({name: 'vip', query: {from: this.$route.fullPath}})
        }
      }
    }
  }
</script>

<style lang='less'>
  @import '../assets/less/_mixins-wln.less';

  .user-wrap {
    padding-bottom: 56px;
    .user-info {
      height: 100px;
      background: @primary;
      display: flex;
      align-items: center;
      /*用户头像*/
      .user-avatar {
        position: relative;
        width: 60px;
        height: 60px;
        .user-avatar-img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        .user-vip {
          position: absolute;
          right: 0;
          bottom: 5px;
        }
      }
      /*用户信息*/
      .user-msg {
        .user-name {
          font-size: 17px;
        }
        .user-des {
          font-size: 12px;
        }
        .viprank{
          display: inline-block;
          padding:1px 6px;
          border:1px solid #fff;
          border-radius: 12px;
          font-size: 10px;
          font-style:italic;
        }
        color: #fff;
      }
      /*用户修改信息*/
      .user-edit {
        position: absolute;
        right: 18px;
        .xzy-icon-enter {
          font-size: 16px;
          color: #fff;
        }
      }
    }
    @gray: #4d555d;
    /*三个操作表*/
    .user-option {
      display: flex;
      height: 92px;
      background: #fff;
      a {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .user-option-img {
        width: 39px;
        height: 39px;
      }
      label {
        font-size: 12px;
        color: @gray;
      }
    }
    .user-items {
      background: #fff;
      .user-item {
        display: block;
        height: 50px;
        &:not(:first-child) {
          background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
          background-size: 100% 1px;
          background-repeat: no-repeat;
          background-position: 35px 0;
        }
        span {
          line-height: 50px;
          vertical-align: middle;
          color: @gray;
        }
        img {
          vertical-align: middle;
        }
        .iconfont {
          position: absolute;
          right: 15px;
          vertical-align: middle;
          line-height: 50px;
          color: #93999f;
        }
      }
    }
  }
</style>
